<template>
    <el-card>
        <!-- 表单 -->
        <el-form :inline="true" :model="queryForm" class="demo-form-inline">
            <el-form-item label="订单号">
                <el-input v-model="queryForm.orderNo" placeholder="订单号"></el-input>
            </el-form-item>
            <el-form-item label="收货人">
                <el-input v-model="queryForm.consignee" placeholder="收货人"></el-input>
            </el-form-item>
            <el-form-item label="手机号">
                <el-input v-model="queryForm.phone" placeholder="手机号"></el-input>
            </el-form-item>
            <el-form-item label="订单状态">
                <el-select v-model="queryForm.orderState" placeholder="订单状态">
                <el-option label="已受理" value="已受理"></el-option>
                <el-option label="派送中" value="派送中"></el-option>
                <el-option label="已完成" value="已完成"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="送达时间">
                <el-date-picker
                    v-model="queryForm.date"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>

        <!-- 表格 -->
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column fixed prop="id" label="订单ID" width="150"></el-table-column>
            <el-table-column fixed prop="orderNo" label="订单号" width="150"></el-table-column>
            <el-table-column fixed prop="orderTime" label="下单时间" width="150"></el-table-column>
            <el-table-column fixed prop="phone" label="联系电话" width="150"></el-table-column>
            <el-table-column fixed prop="consignee" label="收货人" width="150"></el-table-column>
            <el-table-column fixed prop="deliverAddress" label="送货地址" width="150"></el-table-column>
            <el-table-column fixed prop="deliveryTime" label="送达时间" width="150"></el-table-column>
            <el-table-column fixed prop="remarks" label="备注" width="150"></el-table-column>
            <el-table-column fixed prop="orderAmount" label="订单金额" width="150"></el-table-column>
            <el-table-column fixed prop="orderState" label="订单状态" width="150"></el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                    <el-button type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 弹框-表格详情 -->
        <el-dialog title="订单详情" :visible.sync="flag" width="30%">
            <div>订单ID：{{details.id}}</div>
            <div>订单号：{{details.orderNo}}</div>
            <div>下单时间：{{details.orderTime}}</div>
            <div>联系电话：{{details.phone}}</div>
            <div>收货人：{{details.consignee}}</div>
            <div>送货地址：{{details.deliverAddress}}</div>
            <div>送达时间：{{details.deliveryTime}}</div>
            <div>备注：{{details.remarks}}</div>
            <div>订单金额：{{details.orderAmount}}</div>
            <div>订单状态：{{details.orderState}}</div>
        </el-dialog>

        <!-- 分页器 -->
        <div class="block">
            <el-pagination
            @size-change="sizeChange"
            @current-change="currentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 25, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total=total>
            </el-pagination>
        </div>
    </el-card>
</template>

<script>
import {orderList} from "@/api/order.js";  
export default {
    data() {
        return {
            // 分页器
            currentPage: 1,  //当前在第几页上
            pageSize: 5,  //每页显示多少条
            total: 0,  //总条数

            // 表单数据
            queryForm: {
                orderNo: '',
                consignee: '',
                phone: "",
                orderState: "",
                date: "",
            },


            // 表格数据
            tableData: [{
                id: "",
                orderNo: "",
                orderTime: "",
                phone: '',
                consignee: '',
                deliverAddress: '',
                deliveryTime: "",
                remarks: "",
                orderAmount: "",
                orderState: "",
            }],

            // 弹框-订单详情
            details:{
                id: "111",
                orderNo: "222",
                orderTime: "",
                phone: '',
                consignee: '',
                deliverAddress: '',
                deliveryTime: "",
                remarks: "",
                orderAmount: "",
                orderState: "",
            },

            flag: false,  //用于显示、隐藏  弹框-订单详情
        }
    },

    created(){
        orderList({
            currentPage: this.currentPage,
            pageSize: this.pageSize,
        });
        this.getData();
    },

    methods: {
         // 获取数据渲染到页面上
        async getData(q={currentPage: this.currentPage, pageSize: this.pageSize}){
            let res = await orderList(q);
            this.total = res.data.total;  //总条数
            this.tableData = res.data.data;  //用户数据
        },

         // 分页器
        sizeChange(val) {
            this.pageSize = val;
            this.getData();  //点击分页器时渲染一次
        },
        currentChange(val) {
            this.currentPage = val;
            this.getData();
        },

        // 查询按钮
        onSubmit() {
            this.queryForm.date = JSON.stringify(this.queryForm.date);
            this.queryForm.currentPage = this.currentPage;
            this.queryForm.pageSize = this.pageSize;
            this.getData(this.queryForm);
        },

        // 表格-查看按钮
        handleClick(row) {
            this.flag = true;  //显示详情
            this.details = row;
        }
    },

    filters:{
        time(n){
            let date = new Date(n);
            return date.getFullYear() + "/" + (date.getMonth()+1) + "/" + date.getDate();
        }
    }
}
</script>

<style lang="less" scoped>
:deep(.el-table--scrollable-x .el-table__body-wrapper){
    overflow-x: hidden;
}
</style>